<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="js/jquery1.42.min.js"></script>
    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
    <style>
        .slideBox {
            width: 690px;
            height: 208px;
            overflow: hidden;
            position: relative;
            border: 1px solid #ddd;
        }
        .slideBox * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background: #fff;
            font: normal 12px/22px 宋体;
        }
        li>div{
            float: left;
            margin-right: 2px;
        }
        .slideBox .hd ul li,.hd span{
            line-height: 14px;
            width: 14px;
            height: 14px;
            float: left;
            display: block;
            cursor: pointer;
            margin-right: 11px;
            text-indent: 9999em;
            background-image: url(img/lunbo/lunbo_page.png);
            background-position: -46px 0;
        }
        .bd img{
            margin-right: 3px;
        }
        #lunbo_prev{
            background-position: 1px 0;
        }
        #lunbo_next{
            background-position: -13px 0;
        }
        .slideBox .hd ul li.on {
            background-position: -30px 0;
        }
        .slideBox .hd {
            height: 15px;
            width: 180px;
            overflow: hidden;
            position: absolute;
            right: 150px;
            bottom: 0px;
            z-index: 1;
        }
    </style>
</head>
<body>

<div id="slideBox" class="slideBox">
    <div class="hd">
        <span id="lunbo_prev"  class="prev"></span>
        <ul>
            <li class="on">1</li>
            <li class="">2</li>
            <li class="">3</li>
            <li class="">4</li>
        </ul>
        <span id="lunbo_next" class="next"></span>
    </div>
    <div class="bd">
        <ul>
            <li style="display: none;">
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_1-3.jpg">
                    </a>
                </div>
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_1-2.jpg">
                    </a>
                </div>
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_1-1.jpg">
                    </a>
                </div>
            </li>
            <li style="display: none;">
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_2-1.jpg" style="width: 225px;height: 180px">
                    </a>
                </div>
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_2-2.jpg">
                    </a>
                </div>
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_2-3.jpg">
                    </a>
                </div>
            </li>
            <li style="display: none;">
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_3-1.jpg">
                    </a>
                </div>
            </li>
            <li style="display: none;">
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_4-1.jpg">
                    </a>
                </div>
                <div>
                    <a href="" >
                        <img src="img/lunbo/lunbo_4-2.jpg">
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>
<script>jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});</script>
</body>
</html>